

<template>
  <view class="Mall4j container">
    <!-- 顶部子分类tab -->
    <scroll-view scroll-x="true" class="category-tit" :scroll-into-view="intoView" :scroll-with-animation="true">
      <block v-for="(item, index) in subCategoryList" :key="index">
        <view :id="'sw' + item.categoryId" :class="'category-item ' + (item.categoryId==categoryId? 'on':'')" :data-id="item.categoryId" @tap="onSubCategoryTap">{{ item.categoryName }}</view>
      </block>
    </scroll-view>
    <!-- 商品列表 -->
    <view class="prod-item">
      <view class="hotsale-item-cont">
        <jp-falls class="falls" :routesList="prodList">
          <template #left={left}>
            <view v-for="(item, index) in left" :key="item.prodId">
              <prod :item="item" />
            </view>
          </template>
          <template #right={right}>
            <view v-for="(item, index) in right" :key="item.prodId">
              <prod :item="item" />
            </view>
          </template>
        </jp-falls>
      </view>
    </view>
    <!-- 空 -->
    <empty v-if="prodList.length==0" />
  </view>
</template>

<script>
var http = require('../../utils/http.js')
import prod from '../../components/production/index.vue'
import empty from '../../components/empty-tips/index.vue'

export default {

  components: {
    prod,
    empty
  },
  props: {},
  data () {
    return {
      subCategoryList: [],
      categoryId: 0,
      prodList: [],
      parentId: '',
      current: 1,
      pages: 0,
      intoView: ''
    }
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
     * 生命周期函数--监听页面加载
     */
  onLoad: function (options) {
    console.log(options, 'options');

    this.setData({
      parentId: options.parentId,
      categoryId: options.categoryId
    })
    this.getSubCategory()
    this.getProdList()
  },

  /**
     * 生命周期函数--监听页面初次渲染完成
     */
  onReady: function () { },

  /**
     * 生命周期函数--监听页面显示
     */
  onShow: function () { },

  /**
     * 生命周期函数--监听页面隐藏
     */
  onHide: function () { },

  /**
     * 生命周期函数--监听页面卸载
     */
  onUnload: function () { },

  /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
  onPullDownRefresh: function () { },

  /**
     * 页面上拉触底事件的处理函数
     */
  onReachBottom: function () {
    if (this.current < this.pages) {
      this.current = this.current + 1
      this.getProdList()
    }
  },

  /**
     * 用户点击右上角分享
     */
  onShareAppMessage: function () { },
  methods: {
    /**
       * 获取顶栏子分类数据
       */
    getSubCategory () {
      var params = {
        url: '/category/categoryInfo',
        method: 'GET',
        data: {
          parentId: this.parentId
        },
        callBack: res => {
          this.setData({
            subCategoryList: res
          })
          this.$nextTick(() => {
            this.intoView = 'sw' + this.categoryId
          })
        }
      }
      http.request(params)
    },

    /**
       * 根据分类id获取商品列表数据
       */
    getProdList () {
      var params = {
        url: '/search/searchProdPage',
        method: 'GET',
        data: {
          categoryId: this.categoryId,
          current: this.current,
          size: 10,
          sort: 0,
          isAllProdType: true
        },
        callBack: res => {
          this.setData({
            prodList: res.current == 1 ? res.records.map((e) => {
              return {
                ...e,
                price_1: this.$parsePrice(e.price)[0],
                price_2: this.$parsePrice(e.price)[1],
              }
            }) : this.prodList.concat(res.records.map((e) => {
              return {
                ...e,
                price_1: this.$parsePrice(e.price)[0],
                price_2: this.$parsePrice(e.price)[1],
              }
            })),
            current: res.current,
            pages: res.pages
          })
        }
      }
      http.request(params)
    },

    /**
       * 切换顶部分类
       */
    onSubCategoryTap (e) {
      this.setData({
        categoryId: e.currentTarget.dataset.id,
        current: 1,
        pages: 0,
        intoView: 'sw' + e.currentTarget.dataset.id
      })
      this.prodList = []

      this.getProdList()
    }
  }
}
</script>
<style>
@import "./sub-category.css";
</style>
